<template>
  <div class="PatientInformation_box">
    <div class="PatientInformation_Close" @click="addClose">
    </div>
    <div class="PatientInformation_Box1">
      <div class="Box1_1">
        <span class="span">{{ ceShiItemObj.shujvObj?.CWH }}床</span>
      </div>
      <div class="Box1_2">{{ ceShiItemObj.shujvObj?.XM }}</div>
      <div class="Box1_3">住院号：{{ ceShiItemObj.shujvObj?.ZYH }}</div>
    </div>
    <div class="PatientInformation_Box2">
      <div class="Box2_1">
        <!-- 性别 -->
        <span>{{ ceShiItemObj.shujvObj?.XB }}</span>
      </div>
      <div class="Box2_2">
        <!-- 年龄 -->
        <span>{{ ceShiItemObj.shujvObj?.NL }}岁</span>
      </div>
      <div class="Box2_3" :class="rtnClass(ceShiItemObj.shujvObj?.HLDJ)">
        {{ ceShiItemObj.shujvObj?.HLDJ }}
      </div>
    </div>
    <div class="PatientInformation_Box3">
      <div class="Box3_left">
        <div class="zhappian"></div>
        <span>入院时间</span>
      </div>
      <div class="Box3_right">
        <span>{{ ceShiItemObj.shujvObj?.RYRQ }}</span>
      </div>
    </div>
    <div class="PatientInformation_Box4">
      <div class="Box3_left">
        <div class="zhappian"></div>
        <span>手术时间</span>
      </div>
      <div class="Box3_right">
        <span>{{ ceShiItemObj.shujvObj?.SSSJ }}</span>
      </div>
    </div>
    <div class="PatientInformation_Box5">
      <div class="Box5_left">
        <div class="left-top">责任医生</div>
        <div class="left-btn">{{ ceShiItemObj.shujvObj?.GCYS }}</div>
      </div>
      <div class="Box5_right">
        <div class="left-top">责任护士</div>
        <div class="left-btn">{{ ceShiItemObj.shujvObj?.ZRHS }}</div>
      </div>
    </div>
    <div class="PatientInformation_Box6">
      <div class="Box6_1" v-if="ceShiItemObj.shujvObj?.DDZC == 1">
        <span>防跌倒</span>
      </div>
      <div class="Box6_2" v-if="ceShiItemObj.shujvObj?.LOSS == 1">
        <span>防丢失</span>
      </div>
      <div class="Box6_3" v-if="ceShiItemObj.shujvObj?.YC == 1">
        <span>压疮高危</span>
      </div>
    </div>
    <div class="shangyizhang" @click="addqiehuanshang"></div>
    <div class="xiayizhang" @click="addqiehuanxia"></div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from "vue"
  import { postdatacenterDbapi } from "@/api/index.js"
  const props = defineProps({
    BedId: {
      type: String,
      default: true
    }
  })
  const emit = defineEmits(["ClosePatientInformation"])
  const addClose = () => {
    emit("ClosePatientInformation")
  }
  const rtnClass = (e) => {
    let clsName = ""
    if (e == "特级护理") {
      clsName = "teji"
    } else if (e == "一级护理") {
      clsName = "yiji"
    } else if (e == "二级护理") {
      clsName = "erji"
    } else if (e == "三级护理") {
      clsName = "sanji"
    } else if (e == "无护理等级" || e == "") {
      clsName = "wuhuli"
    }
    return clsName
  }
  // const TijiaoList = ref({
  //   apiid: "business_inpatient",
  //   token: "business_inpatient",
  //   appid: "业务-住院患者明细",
  //   apptype: "trans"
  // })
  const TijiaoList = ref({
    apiid: "business_inpatient",
    token: "business_inpatient",
    appid: "业务-住院患者",
    apptype: "trans"
  })
  const ceShiItemObj = ref({
    shujvObj: {},
    index: ""
  })
  const shujvList = ref([])
  const init = async (data, id) => {
    console.log(data, id, '传入');
    const res = await postdatacenterDbapi(data)
    console.log(JSON.parse(res.data.data), "患者信息汇总")
    shujvList.value = JSON.parse(res.data.data)
    let arrList = {}
    JSON.parse(res.data.data).forEach((item, index) => {
      // console.log(Number(item.CWH));
      if (Number(item.CWH) == id) {
        // console.log(id,'传进来的id');
        arrList = item
        ceShiItemObj.value.index = index
      }
      ceShiItemObj.value.shujvObj = arrList
    })
    console.log(888, ceShiItemObj.value, '处理的');
  }
  // 获取上一张
  const addqiehuanshang = () => {
    const currentIndex = ceShiItemObj.value.index
    const length = shujvList.value.length
    if (currentIndex > 0) {
      ceShiItemObj.value.index = currentIndex - 1
    } else {
      // 如果已是第一项，就切换到最后一项
      ceShiItemObj.value.index = length - 1
    }
    // 根据新索引获取对应的对象
    ceShiItemObj.value.shujvObj = shujvList.value[ceShiItemObj.value.index]

    // console.log("新索引:", ceShiItemObj.value.index)
    // console.log("对应对象:", ceShiItemObj.value.shujvObj.CWH)
    window.Cocospublic({ MsgName: "PatientChange", BedId: ceShiItemObj.value.shujvObj.CWH })
  }
  // 获取下一张
  const addqiehuanxia = () => {
    console.log(ceShiItemObj.value)
    if (ceShiItemObj.value.index < shujvList.value.length - 1) {
      ceShiItemObj.value.index += 1
    } else {
      ceShiItemObj.value.index = 0 // 设置为数组第一个元素的索引
    }
    // console.log(ceShiItemObj.value.index, "当前的index")
    ceShiItemObj.value.shujvObj = shujvList.value[ceShiItemObj.value.index] // 更新 shujvObj

    // console.log("新索引:", ceShiItemObj.value.index)
    // console.log("对应对象:", ceShiItemObj.value.shujvObj.CWH)
    window.Cocospublic({ MsgName: "PatientChange", BedId: ceShiItemObj.value.shujvObj.CWH , RoomId:''})
  }
  watch(
    () => props.BedId,
    (BedId) => {
      // console.log(BedId, "监听到了")
      init(TijiaoList.value, BedId)
      // aaaCeshi(BedId)
    },
    {
      deep: true,
      immediate: true
    }
  )
</script>
<style scoped lang="less">
  .shangyizhang {
    cursor: pointer;
    width: 140px;
    height: 140px;
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("@/assets/PatientInformation/shangyizhang.png") no-repeat center;
    background-size: 100% 100%;
  }

  .xiayizhang {
    cursor: pointer;
    width: 140px;
    height: 140px;
    position: absolute;
    right: -240px;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url("@/assets/PatientInformation/xiayizhang.png") no-repeat center;
    background-size: 100% 100%;
  }

  .PatientInformation_box {
    width: 100%;
    height: 100%;
    background: url("@/assets/PatientInformation/beijing.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;

    .PatientInformation_Close {
      cursor: pointer;
      width: 88px;
      height: 88px;
      position: absolute;
      top: 20px;
      right: 20px;
      background: url("@/assets/PatientInformation/xhao.png") no-repeat center;
      background-size: 100% 100%;
    }

    .PatientInformation_Box1 {
      position: absolute;
      display: flex;
      align-items: center;
      top: 164px;
      width: 100%;
      height: 82px;
      padding: 0 44px;
      box-sizing: border-box;

      .Box1_1 {
        width: 137px;
        height: 82px;
        line-height: 82px;
        background: url("@/assets/PatientInformation/chuanghao.png") no-repeat center;
        background-size: 100% 100%;
        text-align: center;

        .span {
          background: linear-gradient(180deg, #fff 0%, #bef2ff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 42px;
          font-weight: 600;
        }
      }

      .Box1_2 {
        width: 30%;
        margin-left: 22px;
        color: #000;
        text-align: center;
        font-size: 56px;
        font-weight: 600;
      }

      .Box1_3 {
        width: 525px;
        text-align: right;
        color: rgba(0, 0, 0, 0.6);
        font-family: "PingFang SC";
        font-size: 42px;
        font-weight: 400;
      }
    }

    .PatientInformation_Box2 {
      width: 100%;
      height: 76px;
      position: absolute;
      top: 290px;
      display: flex;
      justify-content: space-between;
      padding: 0 44px;
      box-sizing: border-box;
      align-items: center;

      .Box2_1 {
        width: 264px;
        height: 76px;
        background: url("@/assets/PatientInformation/button.png") no-repeat center;
        background-size: 100% 100%;
        text-align: center;

        span {
          font-weight: 600;
          font-size: 42px;
          background: linear-gradient(180deg, #00d0ff 0%, #0073ff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          line-height: 76px;
        }
      }

      .Box2_2 {
        text-align: center;
        width: 264px;
        height: 76px;
        background: url("@/assets/PatientInformation/button.png") no-repeat center;
        background-size: 100% 100%;

        span {
          font-weight: 600;
          font-size: 42px;
          background: linear-gradient(180deg, #00d0ff 0%, #0073ff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          line-height: 76px;
        }
      }

      .Box2_3 {
        width: 264px;
        height: 76px;
        font-size: 42px;
        font-weight: 600;
        color: #fff;
        text-align: center;
        line-height: 74px;
      }

      .teji {
        background: url("@/assets/PatientInformation/teji.png") no-repeat center;
        background-size: 100% 100%;
      }

      .yiji {
        background: url("@/assets/PatientInformation/yiji.png") no-repeat center;
        background-size: 100% 100%;
      }

      .erji {
        background: url("@/assets/PatientInformation/erji.png") no-repeat center;
        background-size: 100% 100%;
      }

      .sanji {
        background: url("@/assets/PatientInformation/sanji.png") no-repeat center;
        background-size: 100% 100%;
      }

      .wuhuli {
        background: url("@/assets/PatientInformation/wuji.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .PatientInformation_Box3 {
      width: 91%;
      height: 138px;
      position: absolute;
      top: 410px;
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      justify-content: space-between;
      padding: 0 44px;
      box-sizing: border-box;
      border-radius: 16px;
      display: flex;
      border: 2px solid #90a6be;
      align-items: center;

      .Box3_left {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;

        .zhappian {
          width: 90px;
          height: 90px;
          background: url("@/assets/PatientInformation/shijianIcon.png") no-repeat center;
          background-size: 100% 100%;
        }

        span {
          margin-left: 10px;
          font-size: 42px;
          font-weight: 600;
          white-space: nowrap;
        }
      }

      .Box3_right {
        width: 60%;
        height: 100%;
        text-align: right;
        line-height: 138px;

        span {
          font-weight: normal;
          font-size: 42px;
          font-weight: 600;
        }
      }
    }

    .PatientInformation_Box4 {
      width: 91%;
      height: 138px;
      position: absolute;
      top: 572px;
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      justify-content: space-between;
      padding: 0 44px;
      box-sizing: border-box;
      border-radius: 16px;
      display: flex;
      border: 2px solid #90a6be;
      align-items: center;

      .Box3_left {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;

        .zhappian {
          width: 90px;
          height: 90px;
          background: url("@/assets/PatientInformation/shijianIcon.png") no-repeat center;
          background-size: 100% 100%;
        }

        span {
          margin-left: 10px;
          font-size: 42px;
          font-weight: 600;
          white-space: nowrap;
        }
      }

      .Box3_right {
        width: 60%;
        height: 100%;
        text-align: right;
        line-height: 138px;

        span {
          font-weight: normal;
          font-size: 42px;
          font-weight: 600;
        }
      }
    }

    .PatientInformation_Box5 {
      width: 91%;
      height: 240px;
      position: absolute;
      top: 798px;
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      border-radius: 16px;
      display: flex;
      align-items: center;

      .Box5_left {
        width: 409px;
        height: 100%;
        background: url("@/assets/PatientInformation/yisheng.png") no-repeat center;
        background-size: 100% 100%;
        position: relative;

        .left-top {
          position: absolute;
          top: 68px;
          right: 46px;
          color: #586066;
          font-size: 32px;
        }

        .left-btn {
          position: absolute;
          top: 130px;
          right: 46px;
          color: #000;
          font-size: 42px;
          font-weight: 600;
        }
      }

      .Box5_right {
        width: 409px;
        height: 100%;
        background: url("@/assets/PatientInformation/hushi.png") no-repeat center;
        background-size: 100% 100%;

        .left-top {
          position: absolute;
          top: 68px;
          right: 46px;
          color: #586066;
          font-size: 32px;
        }

        .left-btn {
          position: absolute;
          top: 130px;
          right: 46px;
          color: #000;
          font-size: 42px;
          font-weight: 600;
        }
      }
    }

    .PatientInformation_Box6 {
      width: 91%;
      height: 152px;
      position: absolute;
      top: 1080px;
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      box-sizing: border-box;
      border-radius: 16px;
      display: flex;
      align-items: center;

      .Box6_1 {
        width: 186px;
        height: 152px;
        background: url("@/assets/PatientInformation/diedao.png") no-repeat center;
        background-size: 100% 100%;
        text-align: center;

        span {
          line-height: 232px;
          font-size: 32px;
          font-weight: 600;
          background: linear-gradient(180deg, #ff9000 0%, #fa6714 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .Box6_2 {
        margin-left: 32px;
        width: 186px;
        height: 152px;
        background: url("@/assets/PatientInformation/diushi.png") no-repeat center;
        background-size: 100% 100%;
        text-align: center;

        span {
          line-height: 232px;
          font-size: 32px;
          font-weight: 600;
          background: linear-gradient(180deg, #ff9000 0%, #fa6714 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .Box6_3 {
        margin-left: 32px;
        width: 186px;
        height: 152px;
        background: url("@/assets/PatientInformation/yachaung.png") no-repeat center;
        background-size: 100% 100%;
        text-align: center;

        span {
          line-height: 232px;
          font-size: 32px;
          font-weight: 600;
          background: linear-gradient(180deg, #ff9000 0%, #fa6714 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
</style>